Vertical Card Sliding Animation using only HTML & CSS
In this Vertical Card Slider Animation, there are five minimal cards with profile image, username, user profession, and a follow button. All these cards slide vertically and appear one by one. On the webpage, there are only three cards that appear out of five, and only the center one card has full opacity.
The other two cards are a little bit fade out and that you can also see in the preview image. When these cards are sliding and you hover on them then the animation of the cards will be paused which means it stops sliding.
The best thing about this animation and design is, it is created using only HTML & CSS. If you’re feeling difficult to understand what I’m saying and want to see a demo of this design or video tutorial then you can watch a full video tutorial of this Vertical Card Slider Animation with the demo.
Vertical Card Sliding Animation [Source Codes]
To create this program [Vertical Card Sliding Animation]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this sliding card animation from the below download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on these cards won’t appear. You’ve to download files from the given download button to use images also.
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Card Slider | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<div class="card" style="--delay:-1;">
<div class="img"><img src="#" alt=""></div>
<span class="name">Sumit Kapoor</span>
<p>Frontend Developer</p>
<div class="card" style="--delay:0;">
<div class="img"><img src="#" alt=""></div>
<span class="name">Andrew Neil</span>
<p>YouTuber & Blogger</p>
<div class="card" style="--delay:1;">
<div class="img"><img src="#" alt=""></div>
<span class="name">Jasmine Carter</span>
<p>Freelancer & Vlogger</p>
<div class="card" style="--delay:2;">
<div class="img"><img src="#" alt=""></div>
<span class="name">Justin Chung</span>
<div class="card" style="--delay:2;">
<div class="img"><img src="#" alt=""></div>
<span class="name">Adrina Calvo</span>
<p>Teacher & Advertiser</p>
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Card Slider | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="outer">
<div class="card" style="--delay:-1;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Sumit Kapoor</span>
<p>Frontend Developer</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:0;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Andrew Neil</span>
<p>YouTuber & Blogger</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:1;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Jasmine Carter</span>
<p>Freelancer & Vlogger</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:2;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Justin Chung</span>
<p>Backend Developer</p>
</div>
</div>
<a href="#">Follow</a>
</div>
<div class="card" style="--delay:2;">
<div class="content">
<div class="img"><img src="#" alt=""></div>
<div class="details">
<span class="name">Adrina Calvo</span>
<p>Teacher & Advertiser</p>
</div>
</div>
<a href="#">Follow</a>
</div>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
font-family: "Poppins", sans-serif;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
justify-content: space-between;
border-radius: 100px 20px 20px 100px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
animation: animate 15s linear infinite;
animation-delay: calc(3s * var(--delay));
animation-play-state: paused;
.wrapper .card:last-child{
animation-delay: calc(-3s * var(--delay));
transform: translateY(100%) scale(0.5);
transform: translateY(100%) scale(0.7);
transform: translateY(0%) scale(1);
transform: translateY(-100%) scale(0.7);
transform: translateY(-100%) scale(0.5);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
transition: all 0.3s ease;
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}
.wrapper .outer{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .card{
background: #fff;
width: 430px;
display: flex;
align-items: center;
padding: 20px;
opacity: 0;
pointer-events: none;
position: absolute;
justify-content: space-between;
border-radius: 100px 20px 20px 100px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
animation: animate 15s linear infinite;
animation-delay: calc(3s * var(--delay));
}
.outer:hover .card{
animation-play-state: paused;
}
.wrapper .card:last-child{
animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
0%{
opacity: 0;
transform: translateY(100%) scale(0.5);
}
5%, 20%{
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
25%, 40%{
opacity: 1;
pointer-events: auto;
transform: translateY(0%) scale(1);
}
45%, 60%{
opacity: 0.4;
transform: translateY(-100%) scale(0.7);
}
65%, 100%{
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
}
.card .content{
display: flex;
align-items: center;
}
.wrapper .card .img{
height: 90px;
width: 90px;
position: absolute;
left: -5px;
background: #fff;
border-radius: 50%;
padding: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.card .img img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.card .details{
margin-left: 80px;
}
.details span{
font-weight: 600;
font-size: 18px;
}
.card a{
text-decoration: none;
padding: 7px 18px;
border-radius: 25px;
color: #fff;
background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
transition: all 0.3s ease;
}
.card a:hover{
transform: scale(0.94);
}
That’s all, now you’ve successfully created a Vertical Card Sliding Animation using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.